import { defineConfig,loadEnv } from "vite"
import vue from "@vitejs/plugin-vue"
import { join } from "path"
import Components from "unplugin-vue-components/vite"
import { VantResolver } from "@vant/auto-import-resolver"
import postcsspxtoviewport from "postcss-px-to-viewport-8-plugin"

export default defineConfig(({mode})=>{
    const env  = loadEnv(mode, './')
    const VITE_ENV = env.VITE_ENV
    console.log(VITE_ENV)
    return {
        plugins: [
            vue(),
            Components({
                resolvers: [VantResolver()]
            })
        ],
        base: VITE_ENV==="development"?'./':"/moveproject/",
        resolve: {
            alias: {
                "@": join(__dirname, "src") //需要配合tsconfig.json文件配置baseUrl和paths设置src别名@
            }
        },
        css: {
            postcss: {
                // //rem的适配方案，需要下载插件
                // plugins: [
                //   postCssPxToRem({
                //     rootValue: 37.5, // 1rem的大小 以375px原型图为基准
                //     propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
                //   })
                // ],
                // //vw的适配方案，需要下载插件
                plugins: [
                    postcsspxtoviewport({
                        unitToConvert: "px", // 要转化的单位
                        viewportWidth: 375, // UI设计稿的宽度
                        unitPrecision: 2, // 转换后的精度，即小数点位数
                        propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
                        viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
                        fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
                        selectorBlackList: ["ignore-"], // 指定不转换为视窗单位的类名，
                        minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
                        mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
                        replace: true, // 是否转换后直接更换属性值
                        // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
                        exclude: [],
                        landscape: false // 是否处理横屏情况
                    })
                ]
            }
        },
        server: {
            port: 3001, // 服务端口号
            open: true, // 服务启动时是否自动打开浏览器
            cors: true, // 允许跨域
            //配置代理
            proxy: {
                "/api": {
                    target: "http://localhost:9001",
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/api/, "")
                }
            }
        },
        // define: {
        //     "process.env": {}
        // },
        build: {
            target: "modules",
            outDir: "dist", //指定输出路径
            assetsDir: "assets", // 指定生成静态资源的存放路径
            minify: "terser" // 混淆器，terser构建后文件体积更小
        },
        publicDir: "public"
    }
})

// export default defineConfig({
//     plugins: [
//         vue(),
//         Components({
//             resolvers: [VantResolver()]
//         })
//     ],
//     base: "./",
//     resolve: {
//         alias: {
//             "@": join(__dirname, "src") //需要配合tsconfig.json文件配置baseUrl和paths设置src别名@
//         }
//     },
//     css: {
//         postcss: {
//             // //rem的适配方案，需要下载插件
//             // plugins: [
//             //   postCssPxToRem({
//             //     rootValue: 37.5, // 1rem的大小 以375px原型图为基准
//             //     propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
//             //   })
//             // ],
//             // //vw的适配方案，需要下载插件
//             plugins: [
//                 postcsspxtoviewport({
//                     unitToConvert: "px", // 要转化的单位
//                     viewportWidth: 375, // UI设计稿的宽度
//                     unitPrecision: 2, // 转换后的精度，即小数点位数
//                     propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
//                     viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
//                     fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
//                     selectorBlackList: ["ignore-"], // 指定不转换为视窗单位的类名，
//                     minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
//                     mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
//                     replace: true, // 是否转换后直接更换属性值
//                     // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
//                     exclude: [],
//                     landscape: false // 是否处理横屏情况
//                 })
//             ]
//         }
//     },
//     server: {
//         port: 3001, // 服务端口号
//         open: true, // 服务启动时是否自动打开浏览器
//         cors: true, // 允许跨域
//         //配置代理
//         proxy: {
//             "/api": {
//                 target: "http://localhost:9001",
//                 changeOrigin: true,
//                 rewrite: (path) => path.replace(/^\/api/, "")
//             }
//         }
//     },
//     // define: {
//     //     "process.env": {}
//     // },
//     build: {
//         target: "modules",
//         outDir: "dist", //指定输出路径
//         assetsDir: "assets", // 指定生成静态资源的存放路径
//         minify: "terser" // 混淆器，terser构建后文件体积更小
//     },
//     publicDir: "public"
// })
